<template>
	<el-card class="${FunctionName}">
		<el-form ref="queryFormRef" :inline="true" :model="state.queryForm" :rules="dataRules" @keyup.enter="getDataList()">
		<#list queryList as field>
			<el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
				<#if field.formType == 'text' || field.formType == 'textarea' || field.formType == 'editor'>
				<el-input v-model.trim="state.queryForm.${field.attrName}" placeholder="请输入${field.fieldComment!}" clearable></el-input>
				<#elseif field.queryFormType == 'select'>
				<#if field.queryDict??>
				<fast-select v-model="state.queryForm.${field.attrName}" dict-type="${field.queryDict}" placeholder="请选择${field.fieldComment!}" clearable></fast-select>
				<#else>
				<el-select v-model="state.queryForm.${field.attrName}" placeholder="请选择${field.fieldComment!}" filterable>
					<el-option label="选择" value="0"></el-option>
				</el-select>
				</#if>
				<#elseif field.queryFormType == 'radio'>
				<#if field.queryDict??>
				<fast-radio-group v-model="state.queryForm.${field.attrName}" dict-type="${field.queryDict}"></fast-radio-group>
				<#else>
				<el-radio-group v-model="state.queryForm.${field.attrName}">
					<el-radio :label="0">单选</el-radio>
				</el-radio-group>
				</#if>
				<#elseif field.queryFormType == 'date'>
				<el-date-picker
					v-model="state.queryForm.dateRange"
					type="daterange"
					style="width: 240px"
					value-format="YYYY-MM-DD"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					:disabled-date="disabledDate"
				>
				</el-date-picker>
				<#elseif field.queryFormType == 'datetime'>
				<el-date-picker
					v-model="state.queryForm.dateRange"
					type="datetimerange"
					style="width: 240px"
					value-format="YYYY-MM-DD"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					:disabled-date="disabledDate"
				>
				</el-date-picker>
				<#else>
				<el-input v-model.trim="state.queryForm.${field.attrName}" placeholder="请输入${field.fieldComment!}" clearable></el-input>
				</#if>
			</el-form-item>
			</#list>
			<el-form-item>
				<el-button types="surface" model="search" @click="queryHandle()">查询</el-button>
				<el-button types="surface" model="reset" @click="resetHandle()">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'${moduleName}:${functionName}:add'" types="surface" model="add" @click="addOrUpdateHandle()">新增</el-button>
				<el-button v-auth="'${moduleName}:${functionName}:remove'" types="surface" model="delete" @click="deleteBatchHandle()">删除</el-button>
				<el-button v-auth="'${moduleName}:${functionName}:export'" types="surface" model="export" @click="downloadHandle()">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table
			v-loading="state.dataListLoading"
			row-key="id"
			:data="state.dataList"
			:default-sort="{ prop: state.order, order: state.asc ? 'ascending' : 'descending' }"
			@selection-change="selectionChangeHandle"
			@sort-change="sortChangeHandle"
		>
			<el-table-column type="selection" width="50"></el-table-column>
			<#list gridList as field>
			<#if field.formDict??>
			<fast-table-column key="${field.attrName}" prop="${field.attrName}" label="${field.fieldComment!}" dict-type="${field.formDict}"></fast-table-column>
			<#else>
			<el-table-column key="${field.attrName}" prop="${field.attrName}" label="${field.fieldComment!}" sortable="<#if field.gridSort>custom<#else>false</#if>"></el-table-column>
			</#if>
				</#list>
			<el-table-column label="操作" fixed="right" width="150">
				<template #default="scope">
					<el-button v-auth="'${moduleName}:${functionName}:query'" type="primary" link @click="detailsHandle(scope.row.id)">详情</el-button>
					<el-button v-auth="'${moduleName}:${functionName}:edit'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button v-auth="'${moduleName}:${functionName}:remove'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refresh-data-list="refreshCurrentList"></add-or-update>
		<!-- 弹窗, 详情 -->
		<details-comp ref="detailsRef"></details-comp>
	</el-card>
</template>

<script setup lang="ts" name="${ModuleName}${FunctionName}Index">
import { reactive, ref } from 'vue'
<#list queryList as field>
<#if field.queryFormType == 'date' || field.queryFormType == 'datetime'>
import moment from 'moment'
<#break>
</#if>
</#list>

import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'

import AddOrUpdate from './add-or-update.vue'
import detailsComp from './details.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/${moduleName}/${functionName}/page',
	deleteUrl: '/${moduleName}/${functionName}',
	exportUrl: '/${moduleName}/${functionName}/export',
	exportFileName: '${tableComment}'
	order: 'createTime',
	asc: false,
	queryForm: {
		<#list queryList as field>
		<#if field.formType == 'date' || field.formType == 'datetime'>
		dateRange: null<#sep>,</#sep>
		<#elseif field.queryDict??>
		${field.attrName}: ''<#sep>,</#sep>
		<#else>
		${field.attrName}: null<#sep>,</#sep>
		</#if>
		</#list>
	}
})

// 查询表单校验
const dataRules = ref({
	<#list queryList as field>
	${field.attrName}: [
		{ required: false, message: '${field.fieldComment!}不能为空' }
	]<#sep>,</#sep>
	</#list>
})

<#list queryList as field>
<#if field.queryFormType == 'date' || field.queryFormType == 'datetime'>
// 只能选择当天及之前时间
const disabledDate = (time: Date) => {
	return time.getTime() > moment().endOf('day').valueOf()
}
<#break>
</#if>
</#list>

/**
 * @description	: 点击新增或修改按钮
 * @param				 {*} id: 唯一标识符
 * @return				{*}
 */
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

/**
 * @description	: 详情
 * @param				 {*} id: 唯一标识符
 * @return				{*}
 */
const detailsRef = ref()
const detailsHandle = (id?: number) => {
	detailsRef.value.init(id)
}

/**
 * @description	: 表单查询
 * @param				 {*}
 * @return				{*}
 */
const queryFormRef = ref()
const queryHandle = () => {
	queryFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		// 重新获取数据
		getDataList()
	})
}

/**
 * @description	: 表单重置
 * @param				 {*}
 * @return				{*}
 */
const resetHandle = () => {
	<#list queryList as field>
	<#if field.queryFormType == 'date' || field.queryFormType == 'datetime'>
	// 清空时间选择
	state.queryForm.dateRange = null
	<#break>
	</#if>
	</#list>
	// 重置查询表单
	queryFormRef.value.resetFields()
	// 重新获取数据
	getDataList()
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, refreshCurrentList, sortChangeHandle, downloadHandle } = useCrud(state)
</script>
